import { useState, useEffect, useContext } from 'react'
import PanelLeft from '../../../../../common/PanelLeft';
import './index.less';
import Example from '../example';
import { resourcePath } from '../../../../../../utils/resource'
import WyDetail from './WyDetail';
import Wy from './Wy';
import Xb from './Xb';
import XbDetail from './XbDetail';
import useBusinessMap from '../../../../../common/BusinessMap/useBusinessMap';
import JcyjApi from '../../../../../../utils/apis/JcyjApi';
import { Icon, Style } from 'ol/style';
import { clearHighlight, createLayer, dataToFeature } from '../../../../../../utils/helper/mapHelper';
import Zhjc from './Zhjc';
import Yujinmsg from '../Yujinmsg';
import Xq from '../Fxjc/Xq';
import DzenXqDetail from '../Fxjc/DzenXqDetail';
import jcyjContext from '../jcyjContext';

export default function Dizjc(props) {
    const map = useBusinessMap();
    
    // clearHighlight(map);
    const [xbDetailItem, setXbDetailItem] = useState();
    const [wyDetailItem, setWyDetailItem] = useState();
    const { jcdListDates,setJyl } = useContext(jcyjContext)
    const [layers, setLayers] = useState();

    //用于详情数据更新
    const [datas3, setDatas3] = useState();
    const [datas2, setDatas2] = useState();
    const [datas1, setDatas1] = useState();
    function datagx(a) {
        setDatas1(a);

    }
    useEffect(() => {
        setJyl([{
            name: '翠屏区', value: '0',
        }, {
            name: '南溪区', value: '0',
        }, {
            name: '叙州区', value: '0',
        }, {
            name: '江安县', value: '0',
        }, {
            name: '长宁县', value: '0',
        }, {
            name: '高县', value: '0',
        }, {
            name: '珙县', value: '0',
        }, {
            name: '筠连县', value: '0',
        }, {
            name: '兴文县', value: '0',
        }, {
            name: '屏山县', value: '0',
        }, {

        }])
    }, [setJyl])
    useEffect(()=>{
        setXlName(null)
      
    },[xbDetailItem,wyDetailItem])
    useEffect(() => {
        if (map) {
            const handler = evt => {
                const features = map.getFeaturesAtPixel(evt.pixel);
                const item = features?.find(feature => feature.get('jcdlx'))?.getProperties();
                if (item) {
                    setXbDetailItem(null);
                    setWyDetailItem(null);
                    switch (item.jcdlx) {
                        case '滑坡':
                            setWyDetailItem(item);
                            break;
                        case '崩塌':
                            setXbDetailItem(item);
                            break;
                        default:
                    }
                }
            }
            map.on('singleclick', handler);
            return () => {
                map.un('singleclick', handler);
            }
        }
    }, [map])
    useEffect(() => {
        if (map) {
            let xbLayer, wyLayer;
            const features = jcdListDates?.rows?.filter(row => {
                return row.geom
            })?.map(item => {
                return dataToFeature(item)
            })
            xbLayer = createLayer((feature) => {
                const jcdlx = feature.get('jcdlx');
                // console.log('geom',feature.get('geom'))
                if (jcdlx === '滑坡') {
                    const jjx = feature.get('jcjjx')
                    const iconPath = jjx > 300 ? (resourcePath.mapIcons.xb_red) : (jjx > 200 ? (resourcePath.mapIcons.xb_org) : (jjx > 100 ? resourcePath.mapIcons.xb_yellow : resourcePath.mapIcons.xb_blue))
                    return new Style({
                        image: new Icon({
                            src: iconPath,
                            scale: 0.7,
                            anchor: [0.5, 1]

                        })
                    })
                }
            }, features?.filter(feature => feature.get('jcdlx') === '滑坡') || []);
            xbLayer.set('type', 'xb')

            wyLayer = createLayer((feature) => {
                const jcdlx = feature.get('jcdlx');
                if (jcdlx === '崩塌') {
                    const jjx = feature.get('jcjjx')
                    const iconPath = jjx > 300 ? (resourcePath.mapIcons.wy_red) : (jjx > 200 ? (resourcePath.mapIcons.wy_org) : (jjx > 100 ? resourcePath.mapIcons.wy_yellow : resourcePath.mapIcons.wy_blue))
                    return new Style({
                        image: new Icon({
                            src: iconPath,
                            scale: 0.7,
                            anchor: [0.5, 1]

                        })
                    })
                }
            }, features?.filter(feature => feature.get('jcdlx') === '崩塌') || []);
            wyLayer.set('type', 'wy');
            map.addLayer(xbLayer)
            map.addLayer(wyLayer)
            setLayers([xbLayer, wyLayer])

            return () => {
                map.removeLayer(xbLayer)
                map.removeLayer(wyLayer)
            }
        }
    }, [map, jcdListDates])
    const [xlName, setXlName] = useState();
    return <>
        <PanelLeft>
            <div className='dizjc-root' style={{
                width: 350,
                position: "absolute",
                left: 30,
                top: 30,
                bottom: 30,
                background: 'rgba(1,15,31,0.5)',
                // border: '1px solid rgba(9,107,225,0.8)',
                pointerEvents: 'auto',
                overflow: "auto",
                borderRadius: 8
            }}>
                <Wy onDetail={
                    item => {
                        setXbDetailItem(null);
                        setWyDetailItem(item);
                    }} />

                <Xb onDetail={
                    item => {
                        setWyDetailItem(null);
                        setXbDetailItem(item);

                    }
                } />
                <Zhjc />
            </div>
        </PanelLeft>

        <Example datas={[
            {
                name: '预警信息',
                type:'hongs',
                iconPath: resourcePath.mapIcons.yjxx_red
            },
            {
                name: '形变监测',
                type: 'xb',
                iconPath: resourcePath.mapIcons.xb_blue
            }, {
                name: '位移监测',
                type: 'wy',
                iconPath: resourcePath.mapIcons.wy_blue
            },
            // {
            //     name: '隐患点管理',
            //     iconPath: ``
            // }
        ]} onVisibleChange={(checked, value) => {
            const yjLayer = map.getLayers().getArray().find(l => l.get('type') === 'hongs');
            [yjLayer, ...layers].find(layer => layer.get('type') === value)?.set('visible', checked)
        }} />
        <div style={{ display: !datas1 ? 'flex' : 'none' }}>
            {
                wyDetailItem && <WyDetail item={wyDetailItem} onClose={e => {
                    setWyDetailItem(null)
                    // clearHighlight(map)
                }} setDatas1={datagx} setDatas2={setDatas2} setDatas3={setDatas3} />
            }
            {
                xbDetailItem && <XbDetail item={xbDetailItem} onClose={
                    e => {
                        setXbDetailItem(null)
                        // clearHighlight(map)
                    }
                } setDatas1={datagx} setDatas2={setDatas2} setDatas3={setDatas3} />
            }
        </div>
        <div style={{
            display: xlName ? 'none' : 'block'
        }}>
            {datas1 && <Xq datas1={datas1} datas2={datas2} datas3={datas3} onClose={e => { setDatas1(null) }} onName={setXlName}></Xq>}
        </div>


        {/* {!wyDetailItem && !xbDetailItem && <Yujinmsg />} */}
        {
            xlName && <DzenXqDetail xlName={xlName} datas1={datas1} onClose={() => setXlName(null)} />
        }

    </>
}